<template>
  <v-main>
    <!--    step 1 选择年龄-->
    <v-app-bar
        flat
        fixed
        align="center"
        height="60px"
        v-if="step===1"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="3" class="text-left pl-0">
            <v-btn icon @click="$router.back()" class="ml-n3" >
              <v-icon color="lighten-1" >mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="6">
            <div class="mt-3">
              选择性别与生日
            </div>
          </v-col>
          <v-col cols="3" class="text-right pr-0">
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>
    <v-container class="mt-15" v-if="step===1">
      <v-row justify="center">
        <v-col cols="auto">
          <span class="subtitle-2">
            请选择您的性别和生日，以获得更准确的测试结果
          </span>
        </v-col>
      </v-row>
      <v-row justify="center">
        <v-col cols="auto" class="py-0">
          选择性别
        </v-col>
      </v-row>
      <v-row justify="center">
        <v-col cols="auto" class="mr-13">
          <v-avatar size="75" :color="gender==='0'?'primary':'grey lighten-2'" @click="gender='0'">
            <span class="white--text text-h5">男</span>
          </v-avatar>
        </v-col>
        <v-col cols="auto">
          <v-avatar size="75" :color="gender==='1'?'pink accent-1':'grey lighten-2'" @click="gender='1'">
            <span class="white--text text-h5">女</span>
          </v-avatar>
        </v-col>
      </v-row>
      <v-row justify="center">
        <v-col cols="auto" class="py-0">
          选择生日
        </v-col>
      </v-row>
      <v-row justify="center">
        <v-date-picker v-model="birthday" no-title
                       :month-format="monthFormat"
                       :weekday-format="weekdayFormat"
                       :header-date-format="headerDateFormat"
                       :color="gender==='1'?'pink accent-1':'primary'"
                       class="mb-2"
        ></v-date-picker>
      </v-row>
      <v-row justify="center">
        <v-col cols="10" sm="6" class="py-0">
          <v-btn block rounded color="primary" elevation="0" @click="checkGender">
            下一步
          </v-btn>
        </v-col>
      </v-row>
    </v-container>

    <!--    step 2 准备开始测试-->
    <v-app-bar
        flat
        fixed
        align="center"
        height="60px"
        v-if="step===2"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="3" class="text-left pl-0">
            <v-btn icon @click="step-=1" class="ml-n3" >
              <v-icon color="lighten-1" >mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="6">
            <div class="mt-3">
              肤质测试
            </div>
          </v-col>
          <v-col cols="3" class="text-right pr-0">
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>
    <v-container class="mt-15" v-if="step===2">

      <v-row class="mt-15" justify="center">
        <v-col cols="auto" class="border-1px-grey pb-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="30.569" height="39.831" viewBox="0 0 30.569 39.831">
            <path id="路径_906" data-name="路径 906"
                  d="M138.87,39.854c-8.424,0-15.284-6.5-15.284-14.553,0-5.29,4.748-13.453,14.219-24.78a1.389,1.389,0,0,1,2.131,0c9.471,11.326,14.219,19.49,14.219,24.78,0,8.055-6.86,14.553-15.284,14.553ZM126.365,25.3c0,6.485,5.583,11.774,12.505,11.774s12.505-5.29,12.505-11.774c0-4.227-4.161-11.551-12.505-21.712C130.526,13.75,126.365,21.074,126.365,25.3Zm4.168-.239a1.389,1.389,0,1,1,2.779,0,5.187,5.187,0,0,0,2.609,4.2,1.389,1.389,0,0,1-1.538,2.313,7.916,7.916,0,0,1-3.85-6.517Z"
                  transform="translate(-123.586 -0.023)" fill="#fccc27"/>
          </svg>
        </v-col>
        <v-col cols="8" class="border-1px-grey pb-1">
          <div class="text-h6 text--darken-2 mt-1 grey--text">干性/油性测试</div>
        </v-col>
      </v-row>

      <v-row class="mt-5" justify="center">
        <v-col cols="auto" class="border-1px-grey pb-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="34.206" height="34.156" viewBox="0 0 34.206 34.156">
            <g id="组_415" data-name="组 415" transform="translate(0 -2.864)">
              <path id="路径_910" data-name="路径 910"
                    d="M612.233,117.147a.995.995,0,0,0,1.406,1.406,3.761,3.761,0,0,1,5.224,0,.971.971,0,0,0,1.406,0,.971.971,0,0,0,0-1.406A5.7,5.7,0,0,0,612.233,117.147Z"
                    transform="translate(-591.463 -108.858)" fill="#b976ff"/>
              <path id="路径_911" data-name="路径 911"
                    d="M31.418,5.677a9.686,9.686,0,0,0-6.731-2.813,9.434,9.434,0,0,0-6.731,2.813L2.788,20.846a9.4,9.4,0,0,0,0,13.361A9.686,9.686,0,0,0,9.518,37.02a9.434,9.434,0,0,0,6.731-2.813L31.418,19.038a9.4,9.4,0,0,0,0-13.361ZM14.843,32.8A7.494,7.494,0,0,1,4.194,22.252l6.932-6.932,9.443,9.443,1.1,1.105ZM30.012,17.631,23.08,24.563l-1-1-.2-.2-9.443-9.443,6.932-6.932A7.53,7.53,0,1,1,30.012,17.631Z"
                    transform="translate(0 0)" fill="#b976ff"/>
            </g>
          </svg>
        </v-col>
        <v-col cols="8" class="border-1px-grey pb-1">
          <div class="text-h6 text--darken-2 mt-1 grey--text">敏感/耐受测试</div>
        </v-col>
      </v-row>

      <v-row class="mt-5" justify="center">
        <v-col cols="auto" class="border-1px-grey pb-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="28.057" height="34.156" viewBox="0 0 28.057 34.156">
            <path id="路径_907" data-name="路径 907"
                  d="M101.187,19.518a9.759,9.759,0,1,1,9.759-9.759A9.759,9.759,0,0,1,101.187,19.518Zm0-2.44a7.319,7.319,0,1,0-7.319-7.319,7.319,7.319,0,0,0,7.319,7.319Zm13.418,10.979a4.879,4.879,0,1,1,4.879-4.879,4.879,4.879,0,0,1-4.879,4.879Zm0-2.44a2.44,2.44,0,1,0-2.44-2.44A2.44,2.44,0,0,0,114.606,25.617ZM98.748,34.156a6.1,6.1,0,1,1,6.1-6.1A6.1,6.1,0,0,1,98.748,34.156Zm0-2.44a3.66,3.66,0,1,0-3.66-3.66,3.66,3.66,0,0,0,3.66,3.66Z"
                  transform="translate(-91.428)" fill="#ff9c9c"/>
          </svg>
        </v-col>
        <v-col cols="8" class="border-1px-grey pb-1">
          <div class="text-h6 text--darken-2 mt-1 grey--text">色素/非色素测试</div>
        </v-col>
      </v-row>

      <v-row class="mt-5" justify="center">
        <v-col cols="auto" class="border-1px-grey pb-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="32.904" height="30.05" viewBox="0 0 32.904 30.05">
            <path id="路径_908" data-name="路径 908"
                  d="M19.038,11.008a4.758,4.758,0,0,0,6.728,0L27.1,9.671a7.93,7.93,0,0,1,11.216,0l1.337,1.337c1.858,1.857,6.728,0,6.728,0s4.486,1.684,2.242,2.246-8.119,3.1-11.216,0l-1.337-1.337a4.758,4.758,0,0,0-6.728,0l-1.337,1.337c-3.1,3.1-9.738,2.347-11.216,0S19.038,11.008,19.038,11.008Zm0,11.1a4.758,4.758,0,0,0,6.728,0L27.1,20.772a7.93,7.93,0,0,1,11.216,0l1.337,1.337c1.858,1.857,6.728,0,6.728,0s4.487,1.683,2.244,2.244-8.119,3.1-11.216,0l-1.337-1.337a4.758,4.758,0,0,0-6.728,0l-1.337,1.337c-3.1,3.1-9.938,1.848-11.216,0S19.036,22.109,19.036,22.109Zm0,11.1a4.758,4.758,0,0,0,6.728,0L27.1,31.874a7.93,7.93,0,0,1,11.216,0l1.337,1.337c1.858,1.857,6.728,0,6.728,0s4.487,1.683,2.244,2.244-8.119,3.1-11.216,0l-1.337-1.337a4.758,4.758,0,0,0-6.728,0l-1.337,1.337c-3.1,3.1-9.468,2.027-11.216,0S19.036,33.211,19.036,33.211Z"
                  transform="translate(-16.349 -7.347)" fill="#639dfc"/>
          </svg>
        </v-col>
        <v-col cols="8" class="border-1px-grey pb-1">
          <div class="text-h6 text--darken-2 mt-1 grey--text">皱纹/紧致测试</div>
        </v-col>
      </v-row>

      <v-row class="mt-15" justify="center">
        <v-col cols="10" class="py-0">
          <v-btn block rounded color="primary" elevation="0" @click="step+=1">
            开始测试
          </v-btn>
        </v-col>
      </v-row>

    </v-container>

    <!--    step 3 测试题目-->
    <v-app-bar
        class="text-center"
        flat
        fixed
        align="center"
        height="60px"
        v-if="step===3"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="3" class="text-left pl-0">
            <v-btn icon @click="quitOverlay=true" class="ml-n3" v-if="canQuit">
              <v-icon color="lighten-1">mdi-arrow-left</v-icon>
            </v-btn>
            <v-btn icon @click="prevQuestion" class="ml-n3" v-else>
              <v-icon color="lighten-1">mdi-chevron-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="6">
            <div class="mt-3">
              第{{ questionIndex + 1 }}题/共{{ currentQuestions.length }}题
            </div>
          </v-col>
          <v-col cols="3" class="text-right pr-0">
            <v-btn icon @click="checkAnswers" class="ml-n3" v-if="canCommit">
              <v-icon color="lighten-1">mdi-check</v-icon>
            </v-btn>
            <v-btn icon @click="nextQuestion" class="ml-n3" v-else>
              <v-icon color="lighten-1">mdi-chevron-right</v-icon>
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>
    <v-container class="pt-15 full-height" v-if="step===3">
      <v-row class="mt-1" justify="center" v-if="currentQuestionsIndex === 0">
        <v-col cols="auto" class=" pb-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="30.569" height="39.831" viewBox="0 0 30.569 39.831">
            <path id="路径_906" data-name="路径 906"
                  d="M138.87,39.854c-8.424,0-15.284-6.5-15.284-14.553,0-5.29,4.748-13.453,14.219-24.78a1.389,1.389,0,0,1,2.131,0c9.471,11.326,14.219,19.49,14.219,24.78,0,8.055-6.86,14.553-15.284,14.553ZM126.365,25.3c0,6.485,5.583,11.774,12.505,11.774s12.505-5.29,12.505-11.774c0-4.227-4.161-11.551-12.505-21.712C130.526,13.75,126.365,21.074,126.365,25.3Zm4.168-.239a1.389,1.389,0,1,1,2.779,0,5.187,5.187,0,0,0,2.609,4.2,1.389,1.389,0,0,1-1.538,2.313,7.916,7.916,0,0,1-3.85-6.517Z"
                  transform="translate(-123.586 -0.023)" fill="#fccc27"/>
          </svg>
        </v-col>
        <v-col cols="auto" class=" pb-1">
          <div class="text-h6 text--darken-2 mt-1 grey--text">干性/油性测试</div>
        </v-col>
      </v-row>
      <v-row class="mt-1" justify="center" v-if="currentQuestionsIndex === 1">
        <v-col cols="auto" class=" pb-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="34.206" height="34.156" viewBox="0 0 34.206 34.156">
            <g id="组_415" data-name="组 415" transform="translate(0 -2.864)">
              <path id="路径_910" data-name="路径 910"
                    d="M612.233,117.147a.995.995,0,0,0,1.406,1.406,3.761,3.761,0,0,1,5.224,0,.971.971,0,0,0,1.406,0,.971.971,0,0,0,0-1.406A5.7,5.7,0,0,0,612.233,117.147Z"
                    transform="translate(-591.463 -108.858)" fill="#b976ff"/>
              <path id="路径_911" data-name="路径 911"
                    d="M31.418,5.677a9.686,9.686,0,0,0-6.731-2.813,9.434,9.434,0,0,0-6.731,2.813L2.788,20.846a9.4,9.4,0,0,0,0,13.361A9.686,9.686,0,0,0,9.518,37.02a9.434,9.434,0,0,0,6.731-2.813L31.418,19.038a9.4,9.4,0,0,0,0-13.361ZM14.843,32.8A7.494,7.494,0,0,1,4.194,22.252l6.932-6.932,9.443,9.443,1.1,1.105ZM30.012,17.631,23.08,24.563l-1-1-.2-.2-9.443-9.443,6.932-6.932A7.53,7.53,0,1,1,30.012,17.631Z"
                    transform="translate(0 0)" fill="#b976ff"/>
            </g>
          </svg>
        </v-col>
        <v-col cols="auto" class=" pb-1">
          <div class="text-h6 text--darken-2 mt-1 grey--text">敏感/耐受测试</div>
        </v-col>
      </v-row>
      <v-row class="mt-1" justify="center" v-if="currentQuestionsIndex === 2">
        <v-col cols="auto" class=" pb-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="28.057" height="34.156" viewBox="0 0 28.057 34.156">
            <path id="路径_907" data-name="路径 907"
                  d="M101.187,19.518a9.759,9.759,0,1,1,9.759-9.759A9.759,9.759,0,0,1,101.187,19.518Zm0-2.44a7.319,7.319,0,1,0-7.319-7.319,7.319,7.319,0,0,0,7.319,7.319Zm13.418,10.979a4.879,4.879,0,1,1,4.879-4.879,4.879,4.879,0,0,1-4.879,4.879Zm0-2.44a2.44,2.44,0,1,0-2.44-2.44A2.44,2.44,0,0,0,114.606,25.617ZM98.748,34.156a6.1,6.1,0,1,1,6.1-6.1A6.1,6.1,0,0,1,98.748,34.156Zm0-2.44a3.66,3.66,0,1,0-3.66-3.66,3.66,3.66,0,0,0,3.66,3.66Z"
                  transform="translate(-91.428)" fill="#ff9c9c"/>
          </svg>
        </v-col>
        <v-col cols="auto" class=" pb-1">
          <div class="text-h6 text--darken-2 mt-1 grey--text">色素/非色素测试</div>
        </v-col>
      </v-row>
      <v-row class="mt-1" justify="center" v-if="currentQuestionsIndex === 3">
        <v-col cols="auto" class=" pb-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="32.904" height="30.05" viewBox="0 0 32.904 30.05">
            <path id="路径_908" data-name="路径 908"
                  d="M19.038,11.008a4.758,4.758,0,0,0,6.728,0L27.1,9.671a7.93,7.93,0,0,1,11.216,0l1.337,1.337c1.858,1.857,6.728,0,6.728,0s4.486,1.684,2.242,2.246-8.119,3.1-11.216,0l-1.337-1.337a4.758,4.758,0,0,0-6.728,0l-1.337,1.337c-3.1,3.1-9.738,2.347-11.216,0S19.038,11.008,19.038,11.008Zm0,11.1a4.758,4.758,0,0,0,6.728,0L27.1,20.772a7.93,7.93,0,0,1,11.216,0l1.337,1.337c1.858,1.857,6.728,0,6.728,0s4.487,1.683,2.244,2.244-8.119,3.1-11.216,0l-1.337-1.337a4.758,4.758,0,0,0-6.728,0l-1.337,1.337c-3.1,3.1-9.938,1.848-11.216,0S19.036,22.109,19.036,22.109Zm0,11.1a4.758,4.758,0,0,0,6.728,0L27.1,31.874a7.93,7.93,0,0,1,11.216,0l1.337,1.337c1.858,1.857,6.728,0,6.728,0s4.487,1.683,2.244,2.244-8.119,3.1-11.216,0l-1.337-1.337a4.758,4.758,0,0,0-6.728,0l-1.337,1.337c-3.1,3.1-9.468,2.027-11.216,0S19.036,33.211,19.036,33.211Z"
                  transform="translate(-16.349 -7.347)" fill="#639dfc"/>
          </svg>
        </v-col>
        <v-col cols="auto" class=" pb-1">
          <div class="text-h6 text--darken-2 mt-1 grey--text">皱纹/紧致测试</div>
        </v-col>
      </v-row>

      <v-row justify="center" class="pt-2">
        <v-col cols="11">
          <v-tabs-items v-model="questionIndex">
            <v-tab-item :value="index" v-for="(q,index) in currentQuestions" :key="index">
              <v-card elevation="0" class="pa-2">
                <span>{{ q.question }}</span>
                <v-radio-group
                    v-model="currentAnswer"
                >
                  <v-radio
                      v-for="(option,index) in q.options"
                      :label="option"
                      :value="index+1"
                      :key="index"
                  ></v-radio>
                </v-radio-group>

              </v-card>
            </v-tab-item>

          </v-tabs-items>
        </v-col>
      </v-row>
    </v-container>

    <!--    底部小提示-->
    <div v-if="step===3" class="bottom-hint">
      <p class=" text-caption text-center grey--text">该测试由权威皮肤科医生Dr.ZhangYanwen提供支持</p>
    </div>

    <!--    退出的提示-->
    <v-overlay :value="quitOverlay">
      <v-container>
        <v-card light width="250px">
          <v-card-title>提示</v-card-title>
          <v-card-subtitle>确定退出吗？答题进度不会保存</v-card-subtitle>
          <v-card-text class="d-flex justify-space-around">
            <v-btn light elevation="0" class="d-flex" color="lighten-4" @click="$router.back()">确定退出</v-btn>
            <v-btn light elevation="0" class="d-flex" color="primary" @click="quitOverlay=false">继续测试</v-btn>
          </v-card-text>
        </v-card>
      </v-container>
    </v-overlay>

    <!--    提交的提示-->
    <v-overlay :value="finishOverlay">
      <v-container>
        <v-card light width="250px">
          <v-card-title>提示</v-card-title>
          <v-card-subtitle v-if="finished">确定提交吗？</v-card-subtitle>
          <v-card-subtitle v-else>第 {{ blankQuestions }} 题还没答哦</v-card-subtitle>
          <v-card-text class="d-flex justify-space-around">
            <v-btn light elevation="0" class="d-flex" color="lighten-4" @click="finishOverlay=false">取消</v-btn>
            <v-btn light elevation="0" class="d-flex" color="primary" @click="submitAnswers" v-if="finished">提交</v-btn>
          </v-card-text>
        </v-card>
      </v-container>
    </v-overlay>

  </v-main>
</template>

<script>
import {allQuestions, SCORES, levels} from "../util/skinTestQuestions"
import {printMsg} from "../util/util";

export default {
  name: "SkinTest",
  data: () => ({
    step: 1,

    birthday: '',
    gender: '',
    uid:'',
    skinType:'',

    quitOverlay: false,
    finishOverlay: false,
    finished: false,

    blankQuestions: '',

    score: [],

    // 在二级中的index
    questionIndex: 0,
    // 在一级中的index
    currentQuestionsIndex: 0,
    currentQuestionsName: '',
    currentQuestions: '',

    answers: '',
    currentAnswer: undefined,
  }),
  methods: {
    monthFormat(a) {
      return a.split('-')[1].replace('0', '') + '月'
    },
    weekdayFormat(a) {
      let week = ['日', '一', '二', '三', '四', '五', '六']
      let b = parseInt(a.split('-')[2]) - 15
      return week[b]
    },
    headerDateFormat(a) {
      let b = a.split('-')
      if (b.length === 2) {
        return `${b[0]}年${b[1]}月`
      } else {
        return `${b[0]}年`
      }
    },
    checkGender() {
      if (this.gender === '' || this.birthday === '') {
        this.$emit('toast', '请先选择性别与年龄', 2000, true)
      } else {
        this.step += 1
      }
    },
    submitAnswers() {
      // 提交得分并跳转到/home/skin
      this.skinType = []
      this.score=[44,72,40,80]
      for (let i = 0; i < this.score.length; i++) {
        for (let j = levels[i].length-1; j >= 0; j--) {
          if (this.score[i]>=levels[i][j].level){
            this.skinType.push(levels[i][j])
            break
          }
        }
      }
      this.skinType = this.skinType.map(a=>`${a.alias}:${a.type}`).join('|')
      printMsg(this.skinType,this)

      let data ={
        uid:this.uid,
        gender:this.gender,
        birthday:this.birthday,
        skinType:this.skinType,
      }
      this.$http.post('user/changeInfo',data).then(res=>{
        this.$emit('toast','提交成功')
        this.$store.commit('init',res.data)
        this.$router.replace('/home/index?redirect=/home/skin')
      }).catch(res=>{
        this.$emit('toast',res.msg)
      })
    },
    checkAnswers() {
      // 保存答案
      this.answers[this.currentQuestionsIndex][this.questionIndex] = this.currentAnswer

      let err = []
      for (let i = 0; i < this.answers.length; i++) {
        this.score[i] = 0
        for (let j = 0; j < this.answers[i].length; j++) {
          // if (this.answers[i][j]>=0){
          //   printMsg(`${i}-${j} next ${SCORES[this.answers[i][j]]}`)
          // }else{
          //   printMsg(`${i}-${j} next empty`)
          // }
          if (this.answers[i][j] >= 0) {
            this.score[i] += SCORES[this.answers[i][j]]
          } else {
            err.push(`${i + 1}-${j + 1}`)
          }
        }
      }

      if (err.length !== 0) {
        this.blankQuestions = err.join(',')
        this.finished = false
      } else {
        this.finished = true
      }

      this.finishOverlay = true
    },
    prevQuestion() {
      // 当在同一个二级数组中时，切换二级index
      if (this.questionIndex !== 0) {
        // 保存答案
        this.answers[this.currentQuestionsIndex][this.questionIndex] = this.currentAnswer
        // 切换题目
        this.questionIndex -= 1
        this.currentAnswer = this.answers[this.currentQuestionsIndex][this.questionIndex]
      }
      // 当在边缘时，切换一级和二级index
      else if (this.questionIndex === 0 && this.currentQuestionsIndex !== 0) {
        // 保存答案
        this.answers[this.currentQuestionsIndex][this.questionIndex] = this.currentAnswer
        // 切换题目
        this.currentQuestionsIndex -= 1
        this.questionIndex = allQuestions[this.currentQuestionsIndex].questions.length - 1
        this.currentQuestions = allQuestions[this.currentQuestionsIndex].questions
        this.currentQuestionsName = allQuestions[this.currentQuestionsIndex].type
        this.currentAnswer = this.answers[this.currentQuestionsIndex][this.questionIndex]
      }
    },
    nextQuestion() {
      // 当在同一个二级数组中时，切换二级index
      if (this.questionIndex !== this.currentQuestions.length - 1) {
        // 保存答案
        this.answers[this.currentQuestionsIndex][this.questionIndex] = this.currentAnswer
        // 切换题目
        this.questionIndex += 1
        this.currentAnswer = this.answers[this.currentQuestionsIndex][this.questionIndex]
      }
      // 当在边缘时，切换一级和二级index
      else if (this.questionIndex === this.currentQuestions.length - 1 && this.currentQuestionsIndex !== allQuestions.length - 1) {
        // 保存答案
        this.answers[this.currentQuestionsIndex][this.questionIndex] = this.currentAnswer
        // 切换题目
        this.currentQuestionsIndex += 1
        this.questionIndex = 0
        this.currentQuestions = allQuestions[this.currentQuestionsIndex].questions
        this.currentQuestionsName = allQuestions[this.currentQuestionsIndex].type
        this.currentAnswer = this.answers[this.currentQuestionsIndex][this.questionIndex]
      }
    },
  },
  computed: {
    canQuit() {
      return this.currentQuestionsIndex === 0 && this.questionIndex === 0
    },
    canCommit() {
      return this.currentQuestionsIndex === allQuestions.length - 1 && this.questionIndex === this.currentQuestions.length - 1
    }
  },
  mounted() {
    this.birthday = this.$store.state.birthday
    this.gender = this.$store.state.gender
    this.uid = this.$store.state.uid
    this.currentQuestionsIndex = 0;
    this.currentQuestions = allQuestions[this.currentQuestionsIndex].questions;
    this.currentQuestionsName = allQuestions[this.currentQuestionsIndex].type

    //初始化答题卡
    let arr = [];
    for (let i = 0; i < allQuestions.length; i++) {
      let len = allQuestions[i].questions.length
      arr[i] = new Array(len)
    }
    this.answers = arr;

  }
}
</script>

<style scoped>
.bottom-hint {
  position: absolute;
  bottom: 15px;
  width: 100%;
}
</style>
